
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>uni-app学习文档 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>uni-app学习文档 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">uni-app框架的核心价值是什么？它解决了什么主要问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">uni-app是一个使用Vue.js开发所有前端应用的框架。其核心价值在于，开发者只需编写一套代码，就可以将其发布到iOS、Android、Web以及各种小程序等多个平台，解决了需要为不同平台维护多套代码的问题。</div>
          </div>
          <div class="card-source">来源: uni-app介绍</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在uni-app项目结构中，`pages.json`和`manifest.json`这两个核心配置文件各自的作用是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`pages.json`用于配置页面路由、导航条、选项卡等页面级信息。而`manifest.json`用于配置应用名称、appid、logo、版本等应用打包信息。</div>
          </div>
          <div class="card-source">来源: 目录结构</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">uni-app如何实现平台差异化编码，即只让某段代码在特定平台生效？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">uni-app通过“条件编译”技术实现平台差异化。开发者可以在代码中使用`#ifdef`、`#endif`等指令来包裹特定平台的代码块，这样该代码块就只会在指定的平台（如APP、MP-WEIXIN、H5）下被编译。</div>
          </div>
          <div class="card-source">来源: 条件编译</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">当一个配置为tabBar的页面被展示过一次后，再次切换到该页面时，其生命周期钩子的触发有何不同？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">tabBar的页面在展现过一次后就会保留在内存中。当再次切换到该页面时，只会触发页面的`onShow`生命周期钩子，而不会再次触发`onLoad`。</div>
          </div>
          <div class="card-source">来源: tabBar</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在uni-app中实现页面跳转主要有哪两种方式？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">uni-app提供两种页面路由跳转方式：一种是使用类似HTML中`<a>`标签的`<navigator>`组件进行声明式跳转；另一种是调用`uni.navigateTo`等API进行编程式跳转。</div>
          </div>
          <div class="card-source">来源: 页面路由</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">uni-app开发中，跨域问题是否会影响所有平台？请说明原因。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">不会。跨域是浏览器的专用概念，因此只在开发H5应用时，当前端代码和后端接口未部署在同域服务器上时才会出现。对于App和小程序等非H5平台，则不存在跨域问题。</div>
          </div>
          <div class="card-source">来源: 移动端跨域问题</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">uni-app的数据缓存（Storage）在H5端和App端的实现机制和限制有何不同？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">H5端的数据缓存是基于`localStorage`，大小受浏览器限制（通常为5M），可能会被清理。而App端是基于原生的`plus.storage`，无大小限制，并且是持久化的，不会被当作缓存清理。</div>
          </div>
          <div class="card-source">来源: 数据缓存</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">uni-app项目是如何确定哪个页面是应用的首页（启动页）的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">uni-app会将`pages.json`文件中`pages`配置项列表里的第一个页面作为当前工程的首页（启动页）。</div>
          </div>
          <div class="card-source">来源: 应用首页</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当使用`uni.request`发送POST请求时，如果`header['content-type']`被设置为`application/json`或`application/x-www-form-urlencoded`，`data`参数会如何被处理？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">对于POST请求，如果`header['content-type']`为`application/json`，`data`会被进行JSON序列化。如果`header['content-type']`为`application/x-www-form-urlencoded`，`data`则会被转换为query string（例如`{ name: 'name', age: 18 }` 转换为 `name=name&age=18`）。</div>
          </div>
          <div class="card-source">来源: 发送请求</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
